<template>
    <div id="login">
        <div class="loginwin">
            <div class="title">
                标题
            </div>
            <div class="loginform">
                <el-form 
                :model="ruleForm" 
                ref="ruleFormRef"
                label-width="70px"
                class="demo-ruleForm"
                :size="formSize"
                status-icon

                :rules="rules"
                >
                
                <el-form-item  prop="loginname">
                    <p style="color: white;">登录名</p>
                    <el-input v-model="ruleForm.loginname"
                    :prefix-icon="Stamp"
                    />
                </el-form-item>
                <el-form-item label="密码" prop="checkPass"  id="12">
                    <el-input v-model="ruleForm.password"
                    :prefix-icon="Lock"
                    
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                    type="primary"
                    @click="submitForm(ruleFormRef)"
                    :icon="Promotion"
                    >
                    登录
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)"
                    >Reset</el-button
                    >
                </el-form-item>
                </el-form>
            </div>

        </div>
    </div>
</template>

<script setup>
import {reactive, ref} from 'vue'
import { Stamp ,Lock,Promotion} from "@element-plus/icons-vue";
//在vue3中根据标签的ref属性获得对象的方法
const ruleFormRef=ref()
const formSize = ref('default')
const ruleForm = ref({
    loginname:'',
    password: ''
})

const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
        console.log(formEl);
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const validatePass2=(rule,value,callback)=>{
  if (
    !ruleForm.value.password ||
    ruleForm.value.password.length == 0
  )
    callback(new Error('请输入密码hhh'))
  console.log(ruleForm.value.password)
  if (ruleForm.value.password === '')
    callback(new Error('密码为空，请输入密码'))
  else callback()
}
const rules =reactive({
    loginname: [
    { 
        required: true, //必填
        message: '请输入登录名', //违反规则的提示
        trigger: 'blur' //失去焦点时触发
     },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  password: [
    {
        required: true,
        message: '请输入密码',
        trigger: 'blur'
    },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
],
checkPass:[
    { validator: validatePass2, trigger: 'blur' }
],
})
/** 
 * 
 * @param {*} rule 
 * @param {*} value 当前文本框输入的值
 * @param {*} callback 回调函数，通知Form验证结果，返回error则为失败，返回null成功
//  */

</script>

<style lang="scss" scoped>
#login{
    height: 100%;
    
    background-image: url(../../imgs/云月.png);
    background-size: cover;
    background-repeat: no-repeat;
    .loginwin{
        backdrop-filter: blur;
        background-color: rgb(255, 192, 203,0.2);//
        width:480px;
        height:500px ;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);

        .loginform{
            padding-right: 20px;
            padding-top: 20px;
            .el-form-item__label {
                color: red;
            }
    }
    }

}
</style>



